import React, { useState, useEffect } from 'react'
import { View, Swiper, SwiperItem } from '@tarojs/components'
import dayjs from 'dayjs'

import './index.less'

const weekTitlt = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
export default () => {
  const [weeks, setWeeks] = useState([])
  const [index, setIndex] = useState(0)
  const [currentDate, setCurrentDate] = useState(dayjs().format("YYYY-MM-DD"))
  const [startDate, setStartDate] = useState(null)
  const [endDate, setEndDate] = useState(null)
  useEffect(() => {
    init()
  }, [])

  const init = () => {
    const week = [getWeek(0, currentDate), getWeek(1, currentDate), getWeek(-1, currentDate)]
    setWeeks(week)
    setStartDate(week[2][0].date)
    setEndDate(week[1][6].date)
  }

  const getWeek = (direction, date) => {
    date = dayjs(date)
    let firstDayOfWeek = date.subtract(date.day(), "day");
    const arr = []
    for (let i = direction * 7; i < (1 + direction) * 7; i++) {
      const d = firstDayOfWeek.add(i, "day")
      arr.push({
        date: d.format("YYYY-MM-DD"),
        day: d.format("DD"),
      })
    }
    return arr;
  }

  return (
    <View className='bgBox'>
      <View className='calendar'>
        <View className="swipeDays ">
          {weekTitlt.map((weekt) => {
            return <View className="week">{weekt}</View>
          })}
        </View>
        <Swiper className="swiper" current={index} circular="true" bindchange="change">
          {weeks.map((item) => {
            return <SwiperItem className="swipeDays" >
              {
                item.map((items) => {
                  return <View className={["day", items.date == currentDate ? 'selected' : '']}>{items.day}</View>
                })
              }
            </SwiperItem>
          })}
        </Swiper>
      </View>
    </View>
  )
}
